<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>管理端用户登录</title>
    <header th:replace="header::html"></header>
    <link rel="stylesheet" th:href="@{/xadmin/css/login.css}"/>

    <script th:src="@{/three/three.js}"></script>
    <style>
        body {
            background-color: #333;
            background-image: -webkit-linear-gradient(top, #001f7d, #070026);
            background-image: -moz-linear-gradient(top, #001f7d, #070026);
            background-image: -ms-linear-gradient(top, #001f7d, #070026);
            background-image: -o-linear-gradient(top, #001f7d, #070026);
            background-image: linear-gradient(to bottom, #001f7d, #070026);
            margin: 0px;
            padding: 0;
            overflow: hidden;
        }
    </style>

</head>
<body>
<div>
    <div class="login">
        <div class="message">后台管理系统</div>
        <div id="darkbannerwrap"></div>
        <form action="/login" id="login-form" method="post">
            <input id="username" name="username" placeholder="账号" type="text" autocomplete="off" value="admin10001">
            <hr class="hr15">
            <input id="password" name="password" placeholder="密码" type="password" autocomplete="off" value="123456">
            <hr class="hr15">
            <input style="width: 100%;" lay-submit lay-filter="login" type="submit" value="登录">
            <hr class="hr20">
            <span id="info" style="color: red"></span>
        </form>
    </div>
</div>
</body>

<script type="text/javascript">
	$(function () {
		layui.use('form', function () {
			var form = layui.form;
			//监听提交
			form.on('submit(login)', function (data) {
				$.ajax({
					type: 'post',
					url: '/api-back/login',
					data: $("#login-form").serialize(),
					success: function (datas) {
						if (datas.authenticated == true) {
							localStorage.setItem("userId", datas.principal.uid);
							localStorage.setItem("uname", datas.principal.uname);
							localStorage.setItem("nickName", datas.principal.rid);
							var authorities = datas.authorities;
							var permission = [];
							for (var i in authorities) {
								permission.push(authorities[i].authority);
							}
							localStorage.setItem("permission", JSON.stringify(permission));
							layer.msg("登录成功", {time: 500}, function () {
								location.href = '/api-back/getPage?pageName=backPage/backmain'
							});
						} else {
							layer.msg("登录异常，请联系管理员");
						}
					},
					error: function (xhr, textStatus, errorThrown) {
						var msg = xhr.responseText;
						var response = JSON.parse(msg);
						layer.msg(response.message);
					}
				});
				return false;

			});
		});
	})
</script>

<script>
	var SEPARATION = 100,
		AMOUNTX = 50,
		AMOUNTY = 50;
	var container;
	var camera, scene, renderer;
	var particles, particle, count = 0;
	var mouseX = 0,
		mouseY = 0;
	var windowHalfX = window.innerWidth / 2;
	var windowHalfY = window.innerHeight / 2;
	init();
	animate();

	function init() {
		container = document.createElement('div');
		document.body.appendChild(container);
		camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
		camera.position.z = 1000;
		scene = new THREE.Scene();
		particles = new Array();
		var PI2 = Math.PI * 2;
		var material = new THREE.ParticleCanvasMaterial({
			color: 0xffffffff,
			program: function (context) {
				context.beginPath();
				context.arc(0, 0, 1, 0, PI2, true);
				context.fill();
			}
		});
		var i = 0;
		for (var ix = 0; ix < AMOUNTX; ix++) {
			for (var iy = 0; iy < AMOUNTY; iy++) {
				particle = particles[i++] = new THREE.Particle(material);
				particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
				particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
				scene.add(particle);
			}
		}
		renderer = new THREE.CanvasRenderer();
		renderer.setSize(window.innerWidth, window.innerHeight);
		container.appendChild(renderer.domElement);
		document.addEventListener('mousemove', onDocumentMouseMove, false);
		document.addEventListener('touchstart', onDocumentTouchStart, false);
		document.addEventListener('touchmove', onDocumentTouchMove, false);

		window.addEventListener('resize', onWindowResize, false);
	}

	function onWindowResize() {
		windowHalfX = window.innerWidth / 2;
		windowHalfY = window.innerHeight / 2;
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize(window.innerWidth, window.innerHeight);
	}

	function onDocumentMouseMove(event) {
		mouseX = event.clientX - windowHalfX;
		mouseY = event.clientY - windowHalfY;
	}

	function onDocumentTouchStart(event) {
		if (event.touches.length === 1) {
			event.preventDefault();
			mouseX = event.touches[0].pageX - windowHalfX;
			mouseY = event.touches[0].pageY - windowHalfY;
		}
	}

	function onDocumentTouchMove(event) {
		if (event.touches.length === 1) {
			event.preventDefault();
			mouseX = event.touches[0].pageX - windowHalfX;
			mouseY = event.touches[0].pageY - windowHalfY;
		}
	}

	function animate() {
		requestAnimationFrame(animate);
		render();
	}

	function render() {
		camera.position.x += (mouseX - camera.position.x) * .05;
		camera.position.y += (-mouseY - camera.position.y) * .05;
		camera.lookAt(scene.position);
		var i = 0;
		for (var ix = 0; ix < AMOUNTX; ix++) {
			for (var iy = 0; iy < AMOUNTY; iy++) {
				particle = particles[i++];
				particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50);
				particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 2 + (Math.sin((iy + count) * 0.5) + 1) * 2;
			}
		}

		renderer.render(scene, camera);
		count += 0.1;
	}
</script>
</html>